@mixin center() {
	display: flex;
	justify-content: center;
	/* 水平居中 */
	align-items: center;
	/* 垂直居中 */
}

page {
	background-color: #F6F6F6;
}

.wrap {
	padding-top: 20rpx;
}

.no-card {
	text-align: center;
	padding-top: 38rpx;

	.tips {
		margin: 0 auto 66rpx;
		width: 409rpx;
		font-size: 29rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #666666;
		line-height: 44rpx;
	}

	.ps {
		margin-top: 30rpx;
		padding-bottom: 50rpx;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #666666;
	}
}

.add {
	@include center;
	margin: 30rpx 24rpx 0;

	.btn{
		width: 100%;
		height: 88rpx;
		line-height: 88rpx;
		background: linear-gradient(-90deg, #FBD220, #FFE23E);
		color: #333;
		text-align: center;
		border-radius: 44rpx;

		.btn-text {
			padding-left: 15rpx;
		}
	}

}

.have-card {
	margin: 0 auto;
	padding: 20rpx;
	width: 702rpx;
	background: #FFFFFF;
	box-shadow: 0px 0px 10rpx 0px rgba(0, 0, 0, 0.1);
	border-radius: 10rpx;
	
	.title{
		font-size: 28rpx;
		color: #666;
		height: 75rpx;
		line-height: 75rpx;
	}

	.car-box {
		.li {
			padding: 20rpx;
			width: 662rpx;
			height: 160rpx;
			border-radius: 20rpx;
			margin-bottom: 20rpx;
			position: relative;
			overflow: hidden;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #FFFFFF;

			.small-logo {
				margin-right: 20rpx;
				width: 60rpx;
				height: 60rpx;
				float: left;
				background: #FFFFFF;
				border-radius: 50%;
				overflow: hidden;
				-webkit-backface-visibility: hidden;
				-moz-backface-visibility: hidden;
				-webkit-transform: translate3d(0, 0, 0);
				-moz-transform: translate3d(0, 0, 0);

				image {
					width: 60rpx;
					height: 60rpx;
				}
			}

			.name {
				float: left;
			}

			.num {
				float: right;

			}

			.big-logo {
				position: absolute;
				right: 20rpx;
				top: 75rpx;
				width: 174rpx;
				height: 88rpx;
				opacity: 0.3;

				image {
					width: 174rpx;
					height: 88rpx;
				}
			}
		}
	}
}
